<template>
  <div class="wechat-info">
    <div class="wechat-info-main flex-align-center">
      <u-avatar :src="userInfo.wxHeadImg" size="150rpx"></u-avatar>
      <div class="wechat-info-content">
        <div class="wxName">{{ userInfo.wxName }}</div>
        <div class="phone">
          <text v-if="userInfo.phone">{{ userInfo.phone }}</text>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      userInfo: {
        wxHeadImg: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
        wxName: "微信昵称",
        phone: "136****1234",
      },
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.wechat-info {
  padding: 0 33rpx;
  font-family: PingFang SC;
  margin-bottom: 20rpx;
  &-main {
    display: flex;
    align-items: center;
  }
  &-content {
    margin-left: 26rpx;
    .wxName {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
    .phone {
      margin-top: 29rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
    }
  }
}
</style>
